<template>
    <div class="com_box pd_box">
        <div class="pro_title">项目信息</div>
        <el-form-item label="项目名称" prop="name">
            <el-input v-model="addForm.name" placeholder="项目名称" style="width:220px" @change="setSessionStorage">
            </el-input>
        </el-form-item>
        <el-form-item label="项目场景" prop="sid">
            <div class="flexbox com_select">
                <div class="scence_left">
                    <div class="scence_head flexbox flexcenter">
                        <div class="font_14 color_01">选择场景</div>
                    </div>
                    <div class="scence_search">
                        <el-input placeholder="输入品牌、产品搜索" size="small" clearable prefix-icon="el-icon-search" v-model="query">
                        </el-input>
                    </div>
                    <div class="scence_height">
                        <el-checkbox-group v-model="addForm.sid" class="talent_check" @change="setSessionStorage">
                            <el-checkbox :label="item.goods_id" v-for="item in filteredData(scenceList,query)" :key="item.goods_id">
                                <div class="flex flexbox flexcenter">
                                    <div class="talent_info flex flexbox flexcenter flexbetween">
                                        <div>
                                            <div class="talent_name">{{item.brand_name}}</div>
                                            <div class="talent_fans flexbox flexcenter">
                                                <span>{{item.product_name}}</span>
                                            </div>
                                        </div>
                                        <div class="font_14 color_03">
                                            <template v-if="item.business_scene==1">短视频原创</template>
                                            <template v-else-if="item.business_scene==2">短视频混剪</template>
                                            <template v-else-if="item.business_scene==3">直播素材</template>
                                            <template v-else-if="item.business_scene==4">直播直投</template>
                                            <template v-else-if="item.business_scene==5">短视频</template>
                                            <template v-else-if="item.business_scene==6">直播</template>
                                        </div>
                                    </div>
                                </div>
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
                <div class="scence_right">
                    <div class="scence_head flexbox flexcenter flexbetween">
                        <div class="font_14 color_01">已选场景</div>
                        <el-link type="primary" :underline="false" @click="clearBrand">清空</el-link>
                    </div>
                    <div class="scence_has">
                        <div class="has_item flexbox flexcenter flexbetween" v-for="item in selectBrand" :key="item.goods_id">
                            <div class="font_14">
                                <div class="color_01">{{item.brand_name}}</div>
                                <div class="color_02">{{item.product_name}}</div>
                            </div>
                            <div class="flexbox flexcenter">
                                <div class="font_14 color_03">
                                    <template v-if="item.business_scene==1">短视频原创</template>
                                    <template v-else-if="item.business_scene==2">短视频混剪</template>
                                    <template v-else-if="item.business_scene==3">直播素材</template>
                                    <template v-else-if="item.business_scene==4">直播直投</template>
                                    <template v-else-if="item.business_scene==5">短视频</template>
                                    <template v-else-if="item.business_scene==6">直播</template>
                                </div>
                                <el-link :underline="false" icon="el-icon-close" style="margin-left:5px" @click="delBrand(item)"></el-link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-form-item>
    </div>
</template>

<script>
import "@/assets/css/video.css";
export default {
    components: {},
    props: ["addForm", "scenceList"],
    name: "",
    data() {
        return {
            query:""
        };
    },
    created() {},
    computed:{
        selectBrand(){
            let arr = []
            for(let i in this.scenceList){
                for(let a in this.addForm.sid){
                    if(this.scenceList[i].goods_id==this.addForm.sid[a]){
                        arr.push(this.scenceList[i])
                    }
                }
            }
            return arr
        },
    },
    methods: {
        // 删除
        delBrand(item){
            let index =  this.addForm.sid.findIndex(val=>val==item.goods_id)
            if(index!=-1){
                this.addForm.sid.splice(index,1)
            }
            this.setSessionStorage()
        },
        // 清空
        clearBrand(){
            this.addForm.sid = []
            this.setSessionStorage()
        },
        // 筛选
        filteredData(list, query) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if(!item.brand_name || !item.product_name){
                    return
                }
                if (
                    item.brand_name.indexOf(query) !== -1 ||
                    item.product_name.indexOf(query) !== -1
                ) {
                    return item;
                }
            });
            return list;
        },
        setSessionStorage() {
            this.$emit("setSessionStorage");
        },
    },
};
</script>


<style scoped>
.pro_title {
    font-weight: bold;
    font-size: 16px;
    height: 56px;
    line-height: 56px;
}
</style>
